<template>
  <van-nav-bar title="个人中心" fixed />
  <div class="my-container">
    <van-cell title="姓名" :value="user.studentName || user.teacherName" />
    <van-cell title="类型" :value="user.type" />
    <van-cell title="修改密码" is-link @click="showPopup" />
    <van-cell title="退出登录" @click="hQuit" />

    <van-popup v-model:show="show" round :style="{ padding: '20px' }">
      <h3>修改密码</h3>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="formData.password"
            name="原密码"
            label="原密码"
            placeholder="原密码"
            :rules="[{ required: true, message: '请填写原密码' }]"
          />
          <van-field
            v-model="formData.password1"
            type="password"
            name="新密码"
            label="新密码"
            placeholder="新密码"
            :rules="[{ required: true, message: '请填写新密码' }]"
          />
          <van-field
            v-model="formData.password2"
            type="password"
            name="确认密码"
            label="确认密码"
            placeholder="确认密码"
            :rules="[{ required: true, message: '请填写确认密码' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            确定
          </van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>
<style scoped>
.my-container {
  margin-top: 50px;
}
</style>
<script setup>
import { ref, reactive } from "vue";
import { getUser } from "@/stores/useUser";
const user = getUser();
import { showConfirmDialog, showNotify } from "vant";
import { useRouter } from "vue-router";

const router = useRouter();
const show = ref(false);
const showPopup = () => {
  show.value = true;
};
const formData = reactive({
  password: "",
  password1: "",
  password2: "",
});

const hQuit = () => {
  showConfirmDialog({
    title: "系统提示",
    message: "确定要退出吗",
  })
    .then(() => {
      // on confirm
      console.log("退出登录");
      localStorage.clear();
      router.push("/login");
    })
    .catch(() => {
      // on cancel
    });
  // 退出登录
};

const onSubmit = () => {
  showNotify({ type: "success", message: "修改成功, 马上跳转" });
  setTimeout(() => {
    router.push("/login");
  }, 2000);
};
</script>